import 'package:flutter/material.dart';

/// 1.22版本前          1.22版本后
/// FlatButton     ->  TextButton
/// OutlineButton  ->  OutlinedButton
/// RaisedButton   ->  ElevatedButton
///
///
///
class ButtonPage extends StatefulWidget {
  const ButtonPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _ButtonPageState();
}

class _ButtonPageState extends State<ButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          TextButton(
              onPressed: () {
                // Respond to button press
              },
              child: Text('TextButton'),
              style: ButtonStyle(
                // ⽂本样式
                textStyle: MaterialStateProperty.all(
                    TextStyle(fontSize: 18, color: Colors.red)),
                // 前景⾊
                foregroundColor: MaterialStateProperty.resolveWith(
                  (states) {
                    if (states.contains(MaterialState.pressed)) {
                      ////按下时的颜⾊
                      return Colors.red;
                    }
                    //默认状态使⽤灰⾊
                    return Colors.black;
                  },
                ),
                // 背景⾊
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  // 设置按下时的背景颜⾊
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.yellow;
                  }
                  //默认不使⽤背景颜⾊
                  return Colors.white;
                }),
                // 阴影颜⾊
                shadowColor: MaterialStateProperty.all(Colors.yellow),
                // 阴影⾼度
                elevation: MaterialStateProperty.all(20),
                // 设置⽔波纹颜⾊
                overlayColor: MaterialStateProperty.all(Colors.purpleAccent),
                // 设置按钮⼤⼩
                minimumSize: MaterialStateProperty.all(Size(150, 80)),
                // 设置边框
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.red, width: 1)),
                // 设置按钮形状
                shape: MaterialStateProperty.all(StadiumBorder(
                  side: BorderSide(
                      color: Colors.red, width: 1, style: BorderStyle.solid),
                )),
              )),
          OutlinedButton(
              onPressed: () {
                // Respond to button press
              },
              child: Text('TextButton'),
              style: ButtonStyle(
                // ⽂本样式
                textStyle: MaterialStateProperty.all(
                    TextStyle(fontSize: 18, color: Colors.red)),
                // 前景⾊
                foregroundColor: MaterialStateProperty.resolveWith(
                  (states) {
                    if (states.contains(MaterialState.pressed)) {
                      ////按下时的颜⾊
                      return Colors.red;
                    }
                    //默认状态使⽤灰⾊
                    return Colors.black;
                  },
                ),
                // 背景⾊
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  // 设置按下时的背景颜⾊
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.yellow;
                  }
                  //默认不使⽤背景颜⾊
                  return Colors.white;
                }),
                // 阴影颜⾊
                shadowColor: MaterialStateProperty.all(Colors.yellow),
                // 阴影⾼度
                elevation: MaterialStateProperty.all(20),
                // 设置⽔波纹颜⾊
                overlayColor: MaterialStateProperty.all(Colors.purpleAccent),
                // 设置按钮⼤⼩
                minimumSize: MaterialStateProperty.all(Size(150, 80)),
                // 设置边框
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.red, width: 1)),
                // 设置按钮形状
                shape: MaterialStateProperty.all(StadiumBorder(
                  side: BorderSide(
                      color: Colors.red, width: 1, style: BorderStyle.solid),
                )),
              )),
          ElevatedButton(
              onPressed: () {
                // Respond to button press
              },
              child: Text('TextButton'),
              style: ButtonStyle(
                // ⽂本样式
                textStyle: MaterialStateProperty.all(
                    TextStyle(fontSize: 18, color: Colors.red)),
                // 前景⾊
                foregroundColor: MaterialStateProperty.resolveWith(
                  (states) {
                    if (states.contains(MaterialState.pressed)) {
                      ////按下时的颜⾊
                      return Colors.red;
                    }
                    //默认状态使⽤灰⾊
                    return Colors.black;
                  },
                ),
                // 背景⾊
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  // 设置按下时的背景颜⾊
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.yellow;
                  }
                  //默认不使⽤背景颜⾊
                  return Colors.white;
                }),
                // 阴影颜⾊
                shadowColor: MaterialStateProperty.all(Colors.yellow),
                // 阴影⾼度
                elevation: MaterialStateProperty.all(20),
                // 设置⽔波纹颜⾊
                overlayColor: MaterialStateProperty.all(Colors.purpleAccent),
                // 设置按钮⼤⼩
                minimumSize: MaterialStateProperty.all(Size(150, 80)),
                // 设置边框
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.red, width: 1)),
                // 设置按钮形状
                shape: MaterialStateProperty.all(StadiumBorder(
                  side: BorderSide(
                      color: Colors.red, width: 1, style: BorderStyle.solid),
                )),
              )),
        ],
      ),
    );
  }
}
